<template>
  <van-tree-select
    :items="items"
    :active-id.sync="activeId"
    :main-active-index.sync="activeIndex"
    :height="800"
    @click-item="itemClick"
  />
</template>

<script>
  import Vue from 'vue';
  import { TreeSelect } from 'vant';
  import { mapMutations } from 'vuex'
  Vue.use(TreeSelect);
  export default{
    name:"CategoryListContent",
    data() {
       return {
         items:[{
                  // 导航名称
                  text: '手机',
                  // 导航名称右上角徽标
                  // info: 3,
                  // 是否在导航名称右上角显示小红点
                  // dot: true,
                  // 导航节点额外类名
                  className: 'my-class',
                  // 该导航下所有的可选项
                  children: [
                    {
                      // 名称
                      text: '苹果',
                      // id，作为匹配选中状态的标识符
                      id: 1,
                      // 禁用选项
                      // disabled: true
                    },
                    {
                      text: '小米',
                      id: 2
                    },
                    {
                      text: '华为',
                      id: 3
                    },
                    {
                      text: 'OPPO',
                      id: 4
                    },
                    {
                      text: 'vivo',
                      id: 5
                    },
                    {
                      text: '魅族',
                      id: 6
                    },
                    {
                      text: '手机配件',
                      id: 7
                    },
                    {
                      text: '诺基亚',
                      id: 8
                    }
                  ]
                },
                {
                 text: '图书',
                 className: 'my-class',
                 children: [
                   {
                     text: '文学小说',
                     id: 1,
                   },
                   {
                     text: '经管励志',
                     id: 2
                   },
                   {
                     text: '童书教育',
                     id: 3
                   },
                   {
                     text: '人文社科',
                     id: 4
                   }
                 ]
               }
              ],
         activeId: 1,
         activeIndex: 0,
         category:{
           id:'',
           text:''
         }
       };
     },
     methods:{
       ...mapMutations({
         chooseCategory:'chooseCategory'
       }),
       // 获取到数据
       itemClick(data){
         console.log(data)
         // this.category.push(data)
         this.category.id=data.id
         this.category.text=data.text

         this.chooseCategory(data)

        // 跳转到sell页面
        this.$router.push('/sell')
       },
     }

  }
</script>

<style>
</style>
